<template>
  <div>
    <div class="p-title">{{ nav.PersonData }}</div>

    <div class="s-tit mt0">{{ input.nickname }}</div>
    <div class="input-box">
      <input class="input" v-model="nickname" type="text" :placeholder="input.nickname" />
    </div>
    <div class="s-tit">{{ input.avatar }}</div>
    <div class="input-box">
      <a-upload
        v-model:file-list="fileList"
        name="file"
        list-type="picture-card"
        class="avatar-uploader"
        :show-upload-list="false"
        :action="`${conf.baseURL}/app-api/infra/file/upload`"
        :before-upload="beforeUpload"
        @change="handleChange"
      >
        <img v-if="imageUrl" class="img-ava" :src="imageUrl" alt="avatar" />
        <div v-else>
          <loading-outlined v-if="loading"></loading-outlined>
          <plus-outlined v-else></plus-outlined>
          <div class="ant-upload-text">{{ input.upload }}</div>
        </div>
      </a-upload>
    </div>
    <div class="s-tit">{{ input.sex }}</div>
    <div class="input-box">
      <a-radio-group v-model:value="Sex">
        <a-radio :value="1">{{ input.Man }}</a-radio>
        <a-radio :value="2">{{ input.Woman }}</a-radio>
      </a-radio-group>
    </div>
    <!-- <div class="s-tit mt0">{{ nav.Im }}</div>
    <div class="input-box">
      <input class="input" v-model="Im" type="text" :placeholder="nav.Im" />
    </div>
    <div class="other-box">
      <div class="mr">
        <div class="s-tit">{{ nav.Salutation }}</div>
        <div class="input-box">
          <input class="input" v-model="Salutation" type="text" :placeholder="nav.Salutation" />
        </div>
      </div>
      <div>
        <div class="s-tit">{{ nav.PhoneNumber }}</div>
        <div class="input-box">
          <input class="input" v-model="PhoneNumber" type="text" :placeholder="nav.PhoneNumber" />
        </div>
      </div>
      <div class="mr">
        <div class="s-tit">{{ nav.Fname }}</div>
        <div class="input-box">
          <input class="input" v-model="Fname" type="text" :placeholder="nav.Fname" />
        </div>
      </div>
      <div>
        <div class="s-tit">{{ nav.Lname }}</div>
        <div class="input-box">
          <input class="input" v-model="Lname" type="text" :placeholder="nav.Lname" />
        </div>
      </div>
      <div class="mr">
        <div class="s-tit">{{ nav.Email }}</div>
        <div class="input-box">
          <input class="input" v-model="Email" type="text" :placeholder="nav.Email" />
        </div>
      </div>
      <div>
        <div class="s-tit">{{ nav.EmailContirmation }}</div>
        <div class="input-box">
          <input
            class="input"
            v-model="EmailContirmation"
            type="text"
            :placeholder="nav.EmailContirmation"
          />
        </div>
      </div>
      <div class="mr">
        <div class="s-tit">{{ nav.Password }}</div>
        <div class="input-box">
          <input class="input" v-model="Password" type="text" :placeholder="nav.Password" />
        </div>
        <div class="p-mess">{{ mess.p8length }}</div>
      </div>
      <div>
        <div class="s-tit">{{ nav.PasswordContirmation }}</div>
        <div class="input-box">
          <input
            class="input"
            v-model="PasswordContirmation"
            type="text"
            :placeholder="nav.PasswordContirmation"
          />
        </div>
      </div>
    </div> -->
    <div class="save-btn" @click="saveBtn">{{ btn.Preservation }}</div>
  </div>
</template>

<script lang="ts" setup>
import conf, { language } from "~/conf";
import type { UploadChangeParam, UploadProps } from "ant-design-vue";

const { nav, mess, btn, input } = language;
// let Im = ref("");
// let Salutation = ref("");
// let PhoneNumber = ref("");
// let Fname = ref("");
// let Lname = ref("");
// let Email = ref("");
// let EmailContirmation = ref("");
// let Password = ref("");
// let PasswordContirmation = ref("");
const fileList = ref([]);
const loading = ref<boolean>(false);
const imageUrl = ref<string>("");

let nickname = ref("");
let Sex = ref(1);

function getBase64(img: Blob, callback: (base64Url: string) => void) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result as string));
  reader.readAsDataURL(img);
}
const handleChange = (info: UploadChangeParam) => {
  if (info.file.status === "uploading") {
    loading.value = true;
    return;
  }
  if (info.file.status === "done") {
    imageUrl.value = info.file.response.data;
  }
  if (info.file.status === "error") {
    loading.value = false;
    message.error("upload error");
  }
};

const beforeUpload = (file: UploadProps["fileList"][number]) => {
  const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
  if (!isJpgOrPng) {
    message.error(mess.uploadMessType);
  }
  const isLt5M = file.size / 1024 / 1024 < 5;
  if (!isLt5M) {
    message.error(mess.uploadSize);
  }

  return isJpgOrPng && isLt5M;
};
const getUser = async () => {
  const { data } = await useServerFetch<{nickname:string,avatar:string,sex:number}>("/app-api/member/user/get", {
    method: "GET",
  });
  nickname.value = data.nickname;
  imageUrl.value = data.avatar;
  Sex.value = data.sex;
};
const saveBtn = async () => {
  const { msg, code } = await useServerFetch("/app-api/member/user/update", {
    method: "PUT",
    body:{
      nickname: nickname.value,
      avatar: imageUrl.value,
      sex: Sex.value,
    }
  });
  if(code){
    message.error(msg)
  }else{
    message.success(mess.saveSucess)
  }
};
onMounted(() => {
  getUser();
});
</script>

<style lang="stylus" scoped>
.p-title{
  font-weight: bold;
  font-size: 22px;
  margin-bottom 22px;
}
.s-tit{
  display:inline-block;
  font-size: 14px;
  margin-bottom:5px
  margin-top:25px
}
.input-box{
  position: relative;
  width 337px;
  .input{
    border 0
    width: 337px;
    height: 30px;
    line-height 30px;
    border-radius: 4px;
    border: 1px solid #666666;
    font-size 12px;
    padding 8px
    box-sizing: border-box;
    &:focus{
      outline 0
    }
  }
  .img-ava{
    width 100px;
    height 100px;
    border-radius 6px
  }
}
.other-box{
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  flex-wrap:wrap;
  width 702px
  .p-mess{
    font-size: 11px;
    color: #333333;
    margin-top 10px
  }
  .mr{
    margin-right 28px
  }
}
.save-btn{
  width: 103px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #000000;
  border-radius: 4px;
  font-size: 12px;
  color: #FFFFFF;
  border: 1px solid #666666;
  margin-top 30px
  cursor pointer
}
.mt0{
  margin-top 0
}
</style>
